<!-- 水印工具详情 -->
<template>
	<view style="background-color: #F7F7F7;">
		<view v-if="false" class="stepRow">
			<image class="stepIcon" src="../../../static/images/jindu1.png" v-if="!planeStatus" @click="handleChekcPlan"
				mode=""></image>
			<image class="stepIcon" src="../../../static/images/jindu2.png" v-if="planeStatus" @click="handleChekcPlan"
				mode=""></image>
			<view class="finnaceStep" v-if="planeStatus">
				<view class="MyStep" v-for="(item, index) in stepList">
					<view class="stepLine" v-if="!(index == stepList.length - 1)"></view>
					<view class="stepRow1">
						<image class="stepIdot" src="../../../static/images/icon_jd1@2x.png" mode=""></image>
						<text class="stepdate" style="width:300rpx">{{ item.add_time }}</text>
						<text class="stepdate">{{ item.memberInfo.nickname + ' 提交' }}</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '0'">
						<text class="stepusername" style="margin-left:50rpx">
							<text v-for="items in item.tomemberInfo">
								{{ items.nickname + ' ' }}
							</text>
						</text>
						<text class="stepstatus">待审批</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '1'">
						<text class="stepusername" style="margin-left:50rpx">{{ item.executorInfo.nickname }}</text>
						<text class="stepusername" style="width:280rpx">{{ item.update_time }}</text>
						<text style="color:rgb(18, 139, 241)" class="stepstatus">通过</text>

					</view>
					<view class="stepRow2" v-if="item.approval_status == '-1'">
						<text class="stepusername" style="margin-left:50rpx">{{ item.executorInfo.nickname }}</text>
						<text class="stepusername" style="width:280rpx">{{ item.update_time }}</text>
						<text style="color:rgb(255, 51, 51)" class="stepstatus">驳回</text>
					</view>

					<!-- 备注 -->
					<view class="stepRow2" v-if="item.remark != null">
						<text style="margin-left:50rpx;font-size: 24rpx;color: #999999;">
							{{ item.remark }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 客户信息 -->
		<scroll-view scroll-y class="client_info" :class="editId ? 'ischeckOutInfo' : ''">
			<!-- 驳回节点选择 -->
			<view class="info_item" v-show="
					addReimbursementForm.approval_status &&
						addReimbursementForm.approval_status == '1'">
				<view class="Warptitle all_text_title">驳回节点</view>

				<input disabled="true" style="margin-top: 39rpx; padding-bottom: 10rpx;" v-model="stage"
					placeholder-style="color:#999999;" @click="stageSlect()" />
			</view>
			<view class="stage_class" v-show="stage_show">
				<view class="stage_nickname" v-for="(item,index) in stageList" @click="setStage(item,index)">
					{{item[index].nickname}}
				</view>
			</view>

			<!-- 审批备注 -->
			<view class="textAreaRow" v-if="
					addReimbursementForm.approval_status &&
						addReimbursementForm.approval_status == '1'
				">
				<view class="textTitle all_text_title">审批备注</view>
				<textarea v-model="aprovalRemark" class="textar" maxlength="-1" auto-height="true" />
			</view>



			<view style="overflow: hidden;">
				<!-- 时间 -->
				<view class="info_item" v-if="addReimbursementForm.show_time">
					<view class="Warptitle all_text_title">上传时间</view>
					<input disabled="true" style="margin-top: 39rpx; padding-bottom: 10rpx;"
						v-model="addReimbursementForm.show_time" placeholder-style="color:#999999;" />
				</view>
				<!-- 地址 -->
				<view class="info_item" v-show="addReimbursementForm.address">
					<view class="Warptitle all_text_title">地址</view>
					<text disabled="true"
						style="margin-top: 39rpx; padding-bottom: 10rpx;">{{addReimbursementForm.address}}</text>
				</view>
				<!-- 备注 -->
				<view class="textAreaRow">
					<view class="textTitle all_text_title">备注</view>
					<textarea :disabled="isDisable" v-model="addReimbursementForm.remark" class="textar" maxlength="-1"
						auto-height="true" />
				</view>

				<!-- 水印绘图 -->
				<!-- <view class="">
					<canvasImg ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists"
						:height="lists[0].height" :width="lists[0].width" />
				</view> -->


				<!-- 图片上传 -->
				<view class="upLoadRow">
					<view class="upTitle">
						<view class="all_text_title">图片上传</view>
						<view v-if="!isDisable" @click="getLocation" class="uploadBtn">
							<image src="../../../static/firm/icon_sc.png" class="upImg"></image>
							<text class="upLoadText">点击拍照</text>
						</view>
					</view>
					<view class="imgList">
						<view class="imgItem" style="margin-right: 10rpx;" v-for="(item,index) in imgList">
							<image @click="handleCheckOutImgItem(item)" class="imgItem" :src="item" 
								show-menu-by-longpress="true"></image>
								
							<view v-if="!isDisable" class="closeBox" @click="removeImg(item)">
								<uni-icons type="closeempty" color="#fff" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


		<!-- 底部按钮 -->
		
			<view class="bottom">
				<view v-if="addReimbursementForm.approval_status == '1' && addFormData.withdraw_status != 1">
					<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;" @click="handleApprovel('-1')"
						form-type="reset">
						驳回
					</button>
					<button class="bottom_btn"
						style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
						@click="handleApprovel('1')" form-type="submit">
						审批通过
					</button>
				</view>
				<view v-else>
					<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;" @click="handleCancelClick"
						form-type="reset" v-if="!isDisable">
						保存草稿
					</button>
					<button class="bottom_btn"
						style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
						v-if="editId && !isDisable" @click="handleSubmitEdit" form-type="submit">
						提交
					</button>
					<button class="bottom_btn"
						style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
						v-if="!editId && !isDisable" @click="handleSubmitAdd" form-type="submit">
						确定
					</button>
				</view>
			</view>
			
			<!-- 可撤回时显示 -->
			<view class="bottom"
				v-if="addReimbursementForm.is_edit == 0 && addReimbursementForm.withdraw_status == 1 && addReimbursementForm.approval_status != 1">
				<button class="bottom_btn" @click="handleWithdraw()" style="background: #DD524D; width: 100%;"
					form-type="reset">
					撤回
				</button>
			</view>
			<!-- 可撤回时显示 -->
			<view class="bottom2"
				v-if="addReimbursementForm.approval_status == 1 && addReimbursementForm.withdraw_status == 1">
				<button class="bottom_btn2" @click="handleWithdraw()" style="background: #FF5A5F; margin-left: 0;">
					撤回
				</button>
				<button class="bottom_btn2" @click="handleApprovel('-1')" style="background: #CCCCCC;margin-left: 33%;">
					驳回
				</button>
				<button class="bottom_btn2" style="background: linear-gradient(0deg, #037CE3, #2EB3FF);margin-left: 66%;"
					@click="handleApprovel('1')">
					审批通过
				</button>
			</view>
		
		
	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.js';
	import tx_amap from '../../../common/qqmap-wx-jssdk.js';
	import canvasImg from '../../components/mosowe-canvas-image/mosowe-canvas-image.vue'
	export default {
		components: {
			canvasImg
		},
		data() {
			return {
				addReimbursementForm: {
					address: '',
					remark: '',
					annex: '',
					project_id: [],
					member: {
						nickname: ''
					},
					stage_select: []
				},
				imgList: [],
				client_project_name: [],
				client_project_name_show: '',
				projectList: [],
				isShowProjectType: false,
				planeStatus: false,
				checkId: '',
				searchInfoProject: '',
				editId: '',
				token: '',
				member_id: '',
				company_id: '',
				projectTypeList: [],
				isShowClientType: false, //控制客户类型选择是否显示
				client_type_name: '项目实施相关费用',
				addFormData: {
					type: '1',
					remark: '',
					date: ''
				},

				stepList: [],
				aprovalRemark: '',
				isDisable: false,
				showUrl: '',
				fileLsit: [],
				pdf: '../../static/know/PDF.png',
				stage: '点击选择',
				stageList: [],
				stage_show: false,
				stage_code: '',
				amapPlugin: null,
				tx_amapPlugin: null,
				key: '69caaff8daafdc79c4b1f6f3ae16d475',
				name: '',
				canvasUrl: '',
				nickname: '',
				lists: [{
						type: 'image',
						content: '',
						width: 100,
						height: 200,
						size: 10,
						x: 0,
						y: 0,
						align: 'left',
						arc: false,
						arcX: 30,
						arcY: 20,
						arcR: 20,
					},

					{
						type: 'text',
						content: '姓名',
						width: 100,
						height: 20,
						x: 10,
						y: 30,
						color: '#ffffff',
						size: 50,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'text',
						content: '时间',
						width: 100,
						height: 20,
						x: 10,
						y: 20,
						color: '#ffffff',
						size: 50,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'text',
						content: '地点',
						width: 100,
						height: 20,
						x: 10,
						y: 20,
						color: '#ffffff',
						size: 50,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'image',
						content: '../../../static/backLogo.png',
						width: 350,
						height: 100,
						size: 10,
						x: 50,
						y: 50,
						align: 'left',
						arc: false,
						arcX: 30,
						arcY: 20,
						arcR: 20,
						// file:'../../../static/backLogo.png'
					},
				],

				tx_address: '',
				

			};
		},
		onShow() {
			// this.getProjectType()
			uni.getNetworkType({
				success: function (res) {
					console.log(res.networkType);
					if(res.networkType == 'none' || res.networkType == '2g'){
						uni.showToast({
							title:'请检查网络连接',
							icon:'error',
							mask:true,
							success() {
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1500)
								
							}
						})
					}
				}
			});
			
			// 判断打开应用的平台
			uni.getSystemInfo({
				  success: (res) => {
				  	// window | mac为pc端
				  	// android | ios为手机端
				    console.log('getSystemInfo,', res.platform);
					if(res.platform == 'windows' || res.platform == 'mac'){
						 uni.showToast({
							title:'请在手机端打开',
							icon:'error',
							mask:true,
							success() {
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1000)
								
							}
						})
					}
				  }
				});
			
		},
		async onLoad(options) {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.nickname = uni.getStorageSync('btlh_process_nickname') || '';
			this.editId = options.finnaceId || '';
			this.name = options.name || '';
			this.amapPlugin = new amap.AMapWX({ // 获取高德地图插件
				key: this.key
			});
			this.tx_amapPlugin = new tx_amap({ //获取腾讯插件
				key: '64VBZ-HFNC6-QARSB-ENTIP-IRD53-YUFXR'
			});
			if (this.editId) {
				this.getClientDetails();
				uni.setNavigationBarTitle({
					title: this.name + '-工具详情'
				})

			}

			this.lists[1].content = '姓名:' + this.nickname
		},
		methods: {
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				this.lists[2].content = '时间:' + timer
				return timer;
			},
			// 绘图
			beginCanvas() {
				console.log("beginCanvas")
				uni.showLoading({
					title: '请等待水印添加'
				})
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			// 绘制完成后回调方法,参数为绘制完成后图片地址
			_canvasImage(e) {
				var that = this
				this.fileLsit.push(e)
				console.log('filePush111111');
				// 绘制完成后上传
				uni.uploadFile({
					url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadImg',
					filePath: e,
					name: 'file',
					formData: {
						member_id: this.member_id,
						token: this.token
					},
					success: uploadFileRes => {
						const result = JSON.parse(uploadFileRes.data);
						this.imgList.push(result.datas.img_url);
						console.log(result)
						console.log('imgList111111');
						uni.hideLoading();
					}
				});
			},

			/**
			 *  判断经纬度是否超出中国境内
			 */
			isLocationOutOfChina(latitude, longitude) {
				if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)
					return true;
				return false;
			},
			transformLatWithXY(x, y) {
				var pi = 3.14159265358979324;
				var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
				lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
				lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
				return lat;
			},

			transformLonWithXY(x, y) {
				var pi = 3.14159265358979324;
				var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
				lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
				lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
				return lon;
			},

			/**
			 *  将WGS-84(国际标准)转为GCJ-02(火星坐标):
			 */
			transformFromWGSToGCJ(latitude, longitude) {
				var lat = "";
				var lon = "";
				var ee = 0.00669342162296594323;
				var a = 6378245.0;
				var pi = 3.14159265358979324;

				if (this.isLocationOutOfChina(latitude, longitude)) {
					lat = latitude;
					lon = longitude;
				} else {
					var adjustLat = this.transformLatWithXY(longitude - 105.0, latitude - 35.0);
			  var adjustLon = this.transformLonWithXY(longitude - 105.0, latitude - 35.0);
					var radLat = latitude / 180.0 * pi;
					var magic = Math.sin(radLat);
					magic = 1 - ee * magic * magic;
					var sqrtMagic = Math.sqrt(magic);
					adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
					adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
					latitude = latitude + adjustLat;
					longitude = longitude + adjustLon;
				}
			 return {
					latitude: latitude,
					longitude: longitude
				};

			},

			getLocation() {
				uni.getNetworkType({
					success: function (res) {
						if(res.networkType == 'none'){
							return uni.showToast({
								title:'无网络连接',
								icon:'error'
							})
						}
						if(res.networkType == '2g' || res.networkType == '3g'){
							return uni.showToast({
								title:'网络定位信号差',
								icon:'error'
							})
						}
					}
				});
				uni.showLoading({
					title:'定位中,请稍后',
					mask:true
				})
				let that = this;
				console.log('getLocation')
				// #ifdef APP-PLUS
				console.log('getLocation')
				// 获取位置坐标 坐标系为wgs84
				plus.geolocation.getCurrentPosition(function(res) {
					console.log(res)
					// 将wgs84坐标转换为gcj02
					let gcj02 = that.transformFromWGSToGCJ(res.coords.latitude, res.coords.longitude)
					// 使用gcj02坐标请求定位地址
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + gcj02.latitude + ',' +
							gcj02.longitude + '&key=64VBZ-HFNC6-QARSB-ENTIP-IRD53-YUFXR',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res2) => {
							console.log(res2)
							that.addReimbursementForm.address = res2.data.result.address + "(" + res2
								.data.result.formatted_addresses.recommend + ")";
								
								if(that.addReimbursementForm.address!=''){
									that.selectImg();
								}else{
									uni.showToast({
										title:'未获取到地址',
										icon:'none'
									})
								}
						},
						complete: (res3) => {
							uni.hideLoading();
							console.log(res3);
							uni.showToast({
								title: res3,
								icon: 'none'
							})
						}
					});
				}, function(e) {
					console.log('Geolocation error: ' + e.message);
				}, );

				// #endif


				// #ifdef MP-WEIXIN
				wx.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					highAccuracyExpireTime: 3500,
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.tx_amapPlugin.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res2) => {
								uni.hideLoading();
								this.addReimbursementForm.address = res2.result.address + "(" +
									res2.result.formatted_addresses.recommend + ")";
									
									if(this.addReimbursementForm.address!=''){
										this.selectImg();
									}else{
										uni.showToast({
											title:'未获取到地址',
											icon:'none'
										})
									}
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showToast({
									title:'获取位置失败',
									icon:'none'
								})
							}
						});

					},
					complete: (res3) => {
						console.log(res3)
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title:'获取位置失败,请查看定位是否开启',
							icon:'none'
						})
					}
				});
				// #endif
			},
			// 上传图片
			selectImg() {
				uni.showLoading({
					mask:true,
					title:'图片上传中...'
				})
				
				let that = this;
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: async res => {
						const tempFilePaths = res.tempFilePaths;
						that.phone = res.tempFilePaths[0];
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadFileLocal',
			
								filePath: item,
								name: 'file',
								formData: {
									member_id: this.member_id,
									token: this.token,
									address: this.addReimbursementForm.address
								},
								success: uploadFileRes => {
									console.log('11111111111111')
									const result = JSON.parse(uploadFileRes.data);
									this.imgList.push(result.datas.img_url);
									uni.hideLoading()
									// this.fileLsit.push(result.datas.img_url)
								},
								fail: () => {
									
									uni.hideLoading()
								},
								complete: () => {
									console.log('22222222222')
								}
							});
						});
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			},


			// 获取位置(废弃)
			/* getRegeo() {
				var that = this
				this.amapPlugin.getRegeo({
					success: function(data) {
						var add = data[0].name;
						that.addReimbursementForm.address = data[0].name;
						that.lists[3].content = '地点:' + that.addReimbursementForm.address
						console.log('成功回调')
						console.log(data)
						//成功回调
					},
					fail: (err) => {
						console.log(err)
					},
					complete: (complete) => {
						console.log(complete)
					}
				});

			}, */

			// 点击图片出现
			handleCheckOutImgItem(val) {
				console.log(val);
				/* let fileURl = val.url.replace("http:", "https:")
				if (val.type == 'file') {

					uni.showModal({
						title: '查看文件',
						content: '确定下载查看吗?',
						success: function(res) {
							if (res.confirm) {
								uni.downloadFile({
									url: fileURl,
									success: (res) => {
										var filePath = res.tempFilePath;
										uni.openDocument({
											filePath: filePath,
											success: (res) => {
												console.log('打开文档成功');
											}
										});
									},
									fail: (res) => {
										uni.showToast({
											title: '下载失败',
											icon: 'none'
										})
									}

								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return;
				} */

				uni.previewImage({
					current: val,
					urls: this.imgList,
					loop: true
				})
			},
			// 保存草稿
			async handleCancelClick() {
				if (this.editId) {
					const {
						data: res
					} = await this.$myRequest({
						url: 'Tool/car_edit',
						method: 'POST',
						data: {
							member_id: this.member_id,
							token: this.token,
							company_id: this.company_id,

							is_draft: '1',
							finance_id: this.editId,
							remark: this.addReimbursementForm.remark,
							annex: JSON.stringify(this.imgList),
							address: this.addReimbursementForm.address,
						}
					});
					if (res.code != 200)
						return uni.showToast({
							title: res.datas.msg,
							icon: 'none'
						});
					uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				} else {
					const {
						data: res
					} = await this.$myRequest({
						url: 'Tool/car_add',
						method: 'POST',
						data: {
							member_id: this.member_id,
							token: this.token,
							company_id: this.company_id,

							is_draft: '1',
							remark: this.addReimbursementForm.remark,
							annex: JSON.stringify(this.imgList),
							address: this.addReimbursementForm.address,
						}
					});
					if (res.code != 200)
						return uni.showToast({
							title: res.datas.msg,
							icon: 'none'
						});
					uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				}

				uni.navigateBack({
					delta: 1
				});
			},
			// 新增提交
			async handleSubmitAdd() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Tool/car_add',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						remark: this.addReimbursementForm.remark,
						annex: JSON.stringify(this.imgList),
						address: this.addReimbursementForm.address,
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				})
			},
			// 编辑提交
			async handleSubmitEdit() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Tool/car_edit',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						finance_id: this.editId,

						address: this.addReimbursementForm.address,
						remark: this.addReimbursementForm.remark,
						annex: JSON.stringify(this.imgList),
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				})
			},
			// 如果有客户id(获取详情)
			async getClientDetails() {
				// this.addReimbursementForm = {}
				const {
					data: res
				} = await this.$myRequest({
					url: 'Tool/car_detail',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						finance_id: this.editId
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.addReimbursementForm = res.datas.info;
				// ***处理文件
				if (this.addReimbursementForm.annex) {
					this.imgList = this.addReimbursementForm.annex;
					for(let i =0;i< this.imgList.length;i++){
						if(!this.imgList[i].startsWith('https://')){
							this.imgList[i] = this.imgList[i].replace('https:','https://');
						}
					}
					
				
				}
				// 判断是否禁用
				if (
					this.addReimbursementForm.approval_status &&
					this.addReimbursementForm.approval_status == '1'
				) {
					this.isDisable = true;
				}

				if (this.addReimbursementForm.is_draft == '1') {
					this.isDisable = false;
				}
				if (this.addReimbursementForm.is_edit != '1') {
					this.isDisable = true;
				}
				// ***处理项目流程
				if (this.addReimbursementForm.approval_log) {
					this.stepList = this.addReimbursementForm.approval_log;
				}

				// ***处理报销类型
				if (this.addReimbursementForm.type == '1') {
					this.client_type_name = '项目实施相关费用';
				} else if (this.addReimbursementForm.type == '2') {
					this.client_type_name = '业务相关费用';
				} else if (this.addReimbursementForm.type == '3') {
					this.client_type_name = '招待费';
				} else if (this.addReimbursementForm.type == '4') {
					this.client_type_name = '其他（写备注里）';
				}
			},
			// 移除图片
			removeImg(item) {
				const index = this.imgList.findIndex(img => img == item);
				const index2 = this.fileLsit.findIndex(img => img == item);
				console.log('删除' + item)
				this.fileLsit.splice(index2, 1);
				if (index != -1) {
					this.imgList.splice(index, 1);

				}
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.stage_class {
		width: 300rpx;
		margin-left: 30rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;

	}

	.stage_nickname {
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;

	}

	.bottom2 {
		width: 100%;
	}

	.bottom_btn2 {
		width: 34%;
		height: 88rpx;
		border-radius: 0;
		position: fixed;
		bottom: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		z-index: 999;
	}

	.stepRow {
		position: relative;
		display: flex;
		justify-content: flex-end;

		.stepIcon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
			margin-right: 30rpx;
		}

		.finnaceStep {
			position: absolute;
			top: 70rpx;
			right: 30rpx;
			width: 630rpx;
			background: #ffffff;
			z-index: 99;
			box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.2);
			box-sizing: border-box;
			padding: 48rpx 30rpx;
			border-radius: 20px;

			.MyStep {
				position: relative;
				padding-bottom: 20rpx;

				.stepLine {
					position: absolute;
					width: 2px;
					height: 100%;
					left: 12rpx;
					top: 22rpx;
					background-color: #40a0f2;
				}

				.stepRow1 {
					display: flex;
					align-items: center;

					.stepIdot {
						width: 26rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}

					.stepdate {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #128bf1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.stepRow2 {
					height: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.stepusername {
						margin-left: 20rpx;
						width: 120rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.stepstatus {
						margin: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #19af3c;
					}
				}
			}
		}
	}

	.oneRowTwo {
		margin-top: 40rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.oneRowtitle {
			width: 130rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.onRowInput {
			padding-left: 10rpx;
			font-size: 28rpx;
			width: 192rpx;
			height: 60rpx;
			border-radius: 10rpx;
			border: 1px solid #dfdfdf;
		}

		.picker_input {
			width: 240rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 10rpx;
			background: #ffffff;
			border: 1px solid #dfdfdf;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.bottom {
		width: 100%;
		height: 88rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.bottom_btn {
		width: 375rpx;
		height: 88rpx;
		margin-left: 0;
		border-radius: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.textAreaRow {
		.textTitle {
			margin-top: 49rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333333;
		}
	}

	.upLoadRow {
		.imgList {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 0 10rpx;
			margin: 20rpx;

			.imgItem {
				position: relative;
				width: 160rpx;
				height: 134rpx;
				margin-bottom: 20rpx;
			}

			.closeBox {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				background-color: #007aff;
				display: flex;
				justify-content: center;
				align-items: center;
				right: 0;
				top: 0;
			}
		}

		.upTitle {
			margin-top: 49rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			margin-bottom: 30rpx;

			.uploadBtn {
				display: flex;
				align-items: center;

				.upImg {
					width: 25rpx;
					height: 18rpx;
					margin-left: 32rpx;
					margin-right: 10rpx;
				}

				.upLoadText {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #128bf1;
				}
			}
		}
	}

	.textar {
		width: 660rpx;
		height: 225rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding: 20rpx;
	}

	.client_type_change {
		width: 550rpx;
		// height: 180rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 54rpx;
		right: 30rpx;
		z-index: 99;

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.client_project_change {
		width: 550rpx;
		height: 460rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: -460rpx;
		right: 0rpx;
		z-index: 99;

		.searchInput {
			position: relative;

			.sInput {
				padding-left: 20rpx;
				margin: 20rpx auto;
				width: 510rpx;
				height: 60rpx;
				border-radius: 60rpx;
				background-color: #f7f7f7;
			}

			.sousuo_img {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				z-index: 999;
				right: 40rpx;
				top: 20rpx;
			}
		}

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.ischeckOutInfo {
		// height: calc(100vh - 158rpx - 70rpx) !important;
		height: calc(100vh - 70rpx) !important;
		padding-bottom: 88rpx;
	}

	.client_info {
		width: 100%;
		// height: calc(100vh - 236rpx);
		height: calc(100vh -200rpx);
		padding-bottom: 88rpx;
		background-color: #fff;

		.info_title {
			width: 100%;
			height: 102rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			border-bottom: 1px solid #e9e9e9;
			line-height: 102rpx;
			position: relative;
		}

		.info_item_bottom {
			width: 690rpx;
			height: auto;
			margin-left: 30rpx;
			line-height: 94rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			position: relative;

			.check_group {
				position: absolute;
				top: 5rpx;
				left: 140rpx;
				font-size: 26rpx;

				.check_item {
					transform: scale(0.7);
				}
			}
		}

		.info_item {
			width: 690rpx;
			border-bottom: 1px solid #e9e9e9;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;

			.Warptitle {
				margin: 44rpx 0 40rpx;
			}

			.selectEdit {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.client_type {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-bottom: 14rpx;
				// margin-left: 85rpx;
			}

			.info_img {
				width: 25rpx;
				height: 13rpx;
			}
		}
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 160rpx;
		text-align: center;
		// border-bottom: 20rpx solid #F7F7F7;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.currentType {
		background: #40a0f2;
		color: #ffffff;
	}

	.picker_input_out_container {
		position: relative;
		width: 690rpx !important;

		.dateIcon {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			right: 20rpx;
			top: 8px;
		}

		.picker_input_out {
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 10rpx;
			background: #ffffff;

			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.noticDetails {
		// z-index: 20000!important;
		// position: fixed;
		// top: 5vh;
		// left: 20rpx;
	}

	.detailsImg {
		width: 700rpx;
		z-index: 20000 !important;
		max-height: calc(100vh - 100rpx);

		.datalisImg {
			z-index: 20000 !important;
			width: 100%;
			height: calc(100vh - 100rpx);
		}
	}
</style>
